<template>
	<div class="box">
		<i style="font-style:normal;font-size:14px">警告刷新间隔：</i>
		<el-select
			v-model="value"
			placeholder="数据刷新间隔"
			@change="setpageRefrech"
		>
			<el-option
				v-for="item in options"
				:key="item.value"
				:label="item.label"
				:value="item.value"
			>
			</el-option>
		</el-select>
        <v-Timer ref="child"></v-Timer>
	</div>
</template>

<script>
import { indexedDb, getUserData } from '@/utils/IndexedDB.js';
import vTimer from 'common/TimerRefresh.vue'
export default {
    components:{
        vTimer
    },
	computed: {
		
	},
	created() {
		this.initData();
        this.isData()
	},
	data() {
		return {
			options: [
				{
					value: '100000',
					label: '10秒',
				},
				{
					value: '200000',
					label: '20秒',
				},
				{
					value: '300000',
					label: '30秒',
				},
				{
					value: '400000',
					label: '40秒',
				},
				{
					value: '60*60*24*365',
					label: '关闭自动刷新',
				},
			],
			value: '30',
		};
	},
	methods: {
		initData() {
			getUserData('refreshBase', 'infoBase', 0).then((res) => {
				this.value = res.value;
			});
		},
		isData() {
			let info = '';
			getUserData('refreshBase', 'infoBase', 0).then((res) => {
				info = res.value;
			});

			if (info == this.value) {
				indexedDb(
					'refreshBase',
					[{ id: 0, value: this.value }],
					'infoBase',
					'id'
				);
			}
		},
		async setpageRefrech(e) {
			this.$store.commit('setPageRefresh', this.value);
			indexedDb(
				'refreshBase',
				[{ id: 0, value: this.value }],
				'infoBase',
				'id'
			);

            this.$refs.child.initTotalIntval()
            
		},
	},
};
</script>

<style scoped>
.box {
	display: grid;
	grid-template-columns: 0.9fr 1fr;
	background: #e8e8e8;
	padding: 2px;
	align-items: center;
	border-radius: 5px;
	color: #9c9c9c;
	justify-items: center;
}
</style>
